import React, { FC } from 'react';
import { IndexModelState, ConnectProps, Loading, connect } from 'umi';
import { Select, Card } from 'antd';
import { setSkin } from '@/utils';
import Demo1 from '@/components/Demo1';
import Demo2 from '@/components/Demo2';
import Demo3 from '@/components/Demo3';
import Demo4 from '@/components/Demo4';
import Demo5 from '@/components/Demo5';
import Demo6 from '@/components/Demo6';
import Demo7 from '@/components/Demo7';
import Demo8 from '@/components/Demo8';

const { Option } = Select;

interface IndexPageProps extends ConnectProps {
  indexModel: IndexModelState;
  loading: boolean;
}

const IndexPage: FC<IndexPageProps> = props => {
  const { indexModel } = props;
  const { name } = indexModel;

  const changeSkin = (value: any) => {
    switch (value) {
      case '1':
        setSkin('#27A3FF', '#149BFF');
        break;
      case '2':
        setSkin('#45459f', '#32328c');
        break;
      case '3':
        setSkin('#F60001', '#F60001');
        break;
      default:
        break;
    }
  };
  return (
    <div>
      <Card bordered={false}>
        <h1>{name}</h1>
        <span>更换主题色 </span>
        <Select defaultValue="2" onChange={changeSkin}>
          <Option value="1">蓝色</Option>
          <Option value="2">紫色</Option>
          <Option value="3">红色</Option>
        </Select>
      </Card>
      <Card>
        <h3>1.使用FC类型声明函数式组件</h3>
        <Demo1 />
      </Card>
      <Card>
        <h3>2.泛型函数组件</h3>
        <Demo2 />
      </Card>
      <Card>
        <h3>3.子组件声明 React.PropsWithChildren</h3>
        <Demo3 />
      </Card>
      <Card>
        <h3>4.ref 转发 React.forwardRef</h3>
        <Demo4 />
      </Card>
      <Card>
        <h3>5.性能优化 React.memo</h3>
        <Demo5 />
      </Card>
      <Card>
        <h3>6.类组件声明</h3>
        <Demo6 />
      </Card>
      <Card>
        <h3>7.高阶组件——给组件注入主题</h3>
        <Demo7 />
      </Card>
      <Card>
        <h3>8.高阶组件重构</h3>
        <Demo8 />
      </Card>
    </div>
  );
};
export default connect(
  ({
    indexModel,
    loading,
  }: {
    indexModel: IndexModelState;
    loading: Loading;
  }) => ({
    indexModel,
    loading: loading.models.index,
  }),
)(IndexPage);
